<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label="收款信息" label-width="200" prop="accountType">
				<text :selectable="true">{{account}}</text>
			</u-form-item>
			<u-form-item label="充值数量" label-width="200" prop="number">
				<u-input type="text" v-model="model.number" placeholder="请输入充值数量"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="充值截图" prop="photo" label-width="200">
				<u-upload width="160" max-count="1" max-size="1024*1024" :auto-upload="false" action="" @on-choose-complete="choose"></u-upload>
			</u-form-item>
		</u-form>
		<view class="note">
			<text>温馨提示：为保证顺利充值，请提供真实的截图信息。</text>
		</view>
		<view style="margin-top: 60rpx;">
			<u-button @click="submit" ripple-bg-color="#656565" :plain="false" :ripple="true" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		let that = this;
		return {
			model: {
				number:""
			},
			rules: {
				number: [
					{
						required: true,
						message: '请输入充值数量',
						trigger: ['change','blur'],
					},
					{
						pattern: /^\+?[1-9]\d*$/,
						message: '充值数量必须是大于0的整数',
						trigger: ['change','blur'],
					}
				],
			},
			errorType: ['message'],
			file:"",
			account:""
		};
	},
	onLoad() {
		this.$request.post("/getRechargeAccount", {
			dataType: 'json',
			responseType: 'text'
		})
		.then(res => {
			this.account = res.data.data;
		})
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(this.file==""){
						this.$api.msg("请上传充值截图");
					}else{
						uni.showLoading({
							title:"正在提交",
							mask:true
						})
						this.$request.upload("/recharge/submit",{
							data:{
								number:this.model.number
							},
							filePath:this.file,
							dataType: 'json',
							responseType: 'text'
						})
						.then(res => {
							uni.hideLoading();
							this.$api.msg("提交成功");
						})
						.catch(error => {
							uni.hideLoading();
						});
					}
				}
			});
		},
		choose(lists, name){
			this.file = lists[0].url;
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
.note{
	font-size: 26rpx;
	padding: 30rpx 0;
	line-height: 50rpx;
}
</style>
